"use client";

import { useState } from "react";
import { Button } from 'antd';
export default function LoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsLoading(true);

    try {
      const response = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });
      const data = await response.json();

      if (response.ok) {
        console.log(data);
        alert("登录成功！");
      } else {
        alert(`登录失败：${data.message}`);
      }
    } catch (error) {
      if (error instanceof Error) {
        alert("登录失败：" + error.message);
        return;
      }
      alert("登录失败：未知错误-" + error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className=" flex justify-center items-center w-full h-full bg-sky-100 ">


      
      <form onSubmit={handleFormSubmit} className=" w-2/3 mx-auto">
        <div>
          <label htmlFor="username">用户名：</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">密码：</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
          />
        </div>
        <div>
        <Button type="primary">Primary Button</Button>

          <button type="submit" disabled={isLoading}>
            登录
          </button>
        </div>
      </form>
    </div>
  );
}
